<template>
  <div class="info">
    <div class="title">
      <van-nav-bar title="我的资料">
        <template #left>
          <i
            class="iconfont iconbtn_nav_back iconStyle"
            @click="$router.push('/my')"
          ></i>
        </template>
      </van-nav-bar>
    </div>
    <div class="userInfo">
      <van-cell-group>
        <van-cell title="头像" is-link @click="$router.push('/avatar')">
          <template #default>
            <img :src="userInfo.avatar" alt="" />
          </template>
        </van-cell>
        <van-cell
          title="昵称"
          is-link
          @click="$router.push('/editInfo?prototype=nickname')"
        >
          <template #default>
            <span>{{ userInfo.nickname }}</span>
          </template>
        </van-cell>
        <van-cell title="性别" is-link @click="gender">
          <template #default>
            <span v-if="userInfo.gender === 0">未知</span>
            <span v-if="userInfo.gender === 1">男孩子</span>
            <span v-if="userInfo.gender === 2">女孩子</span>
          </template>
        </van-cell>
        <van-cell title="地区" is-link @click="areaShow = true">
          <template #default>
            <span>{{ areaList.city_list[userInfo.area] }}</span>
          </template>
        </van-cell>
        <van-cell
          title="个人简介"
          is-link
          @click="$router.push('/editInfo?prototype=intro')"
        >
          <template #default>
            <span>{{ userInfo.intro }}</span>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="logoutBtn">
      <van-button
        type="danger"
        size="large"
        plain
        class="btn"
        @click="logoutBtn"
        >退出登录</van-button
      >
    </div>

    <van-popup
      v-model="genderShow"
      position="bottom"
      :style="{ height: '40%' }"
      close-on-click-overlay
    >
      <van-picker
        show-toolbar
        title="标题"
        :columns="columns"
        :default-index="userInfo.gender"
        @confirm="saveGender"
        @cancel="genderShow = false"
      />
    </van-popup>
    <van-popup v-model="areaShow" position="bottom" :style="{ height: '30%' }">
      <van-area
        title="地区"
        :area-list="areaList"
        :columns-num="2"
        @cancel="areaShow = false"
        @confirm="saveArea"
        :value="userInfo.area"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { removelocal } from '@/utils/local.js'
import { getEdit, getuserInfo } from '@/api/login'
import areaList from '@/utils/area.js'
export default {
  data () {
    return {
      genderShow: false,
      columns: ['未知', '男孩子', '女孩子'],
      areaShow: false,
      areaList: areaList
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  created () {
    // console.log(this.$store.state.userInfo)
  },
  methods: {
    logoutBtn () {
      this.$dialog
        .confirm({
          title: '警告',
          message: '您确定要退出登录吗？'
        })
        .then(() => {
          removelocal('token')
          this.$store.commit('setUserInfo', '')
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
    },
    gender () {
      this.genderShow = true
    },
    saveGender (value, index) {
      // console.log(value, index)
      this.genderShow = false
      getEdit({ gender: index }).then(() => {
        this.$toast.loading({
          message: '加载中...',
          duration: 0
        })
        getuserInfo().then(res => {
          res.data.data.avatar = 'http://localhost:1337' + res.data.data.avatar
          this.$store.commit('setUserInfo', res.data.data)
          this.$toast.success('修改成功')
        })
      })
    },
    saveArea (value, index) {
      this.areaShow = false
      this.$toast.loading({
        duration: 0
      })
      // console.log(value)
      getEdit({ area: value[1].code }).then(() => {
        // console.log(value[1].code, value[1].name)
        getuserInfo().then(res => {
          res.data.data.avatar = 'http://localhost:1337' + res.data.data.avatar
          this.$store.commit('setUserInfo', res.data.data)
          this.$toast.success('修改成功')
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.info {
  font-size: 12px;
  .title {
    .iconStyle {
      font-size: 44px;
    }
    /deep/.van-nav-bar__left {
      padding-left: 0;
    }
    /deep/.van-nav-bar__title {
      font-weight: 700;
    }
  }
  .userInfo {
    padding: 15px;
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
  }
  .logoutBtn {
    padding: 15px;
    .btn {
      border: 1px solid #ccc;
      border-radius: 10px;
    }
  }
}
</style>
